<!--考核列表开始-->
<template>
  <div class="clearnListContent">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <!---月份筛选 和保洁员姓名筛选-->

    <div class="areacontent">
      <van-row gutter="30">
        <van-col span="12">
          <div class="shuaixuan">
            <p class="title">月份:</p>
            <p @click="showPickerdate = true" class="dateselect">
              <span>{{signdate}}</span>
              <van-icon name="arrow-down" class="arrowDown" />
            </p>
          </div>
          <van-popup v-model="showPickerdate" position="bottom">
        <van-datetime-picker
          type="year-month"
          @cancel="showPickerdate = false"
          @confirm="onConfirmdate"
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatterDate"
        />
      </van-popup>
        </van-col>
        <van-col span="12">
          <div class="shuaixuan">
            <p class="title">姓名:</p>
            <p class="chosexz" @click="xzshow=true">{{xzname}}</p>
            <van-popup v-model="xzshow" position="bottom" :style="{ height: '40%' }" class="popdiv">
              <div class="popitle">
                <div class="searchxp">
                  <input type="text" v-model="searchx" class="searchx" placeholder="搜索姓名" />
                </div>
              </div>
              <ul class="pop_ul">
                <li
                  :class="{ current: tabCurrentIndex === index }"
                  class="pop_li"
                  v-for="(item,index) in  NewItems"
                  :key="index"
                  @click="chosexz(item.value,index)"
                >{{item.text}}</li>
                <li v-show="nodat" class="pop_li">暂无匹配数据</li>
              </ul>
            </van-popup>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="divheight"></div>
    <!--表格-->
    <div class="countScoreHeader">
      <van-row>
        <van-col :span="5">姓名</van-col>
        <van-col :span="5" class="textcenter">考核次数</van-col>
        <van-col :span="4" class="textcenter">总分</van-col>
        <van-col :span="5" class="textcenter">操作</van-col>
        <van-col :span="5" class="textcenter">历史</van-col>
      </van-row>
    </div>
    <div>
      <van-row v-for="(item ,$index) in List" :key="$index" class="rowItem">
        <van-col :span="5">{{item.cleaner_name}}</van-col>
        <van-col :span="5" class="textcenter">{{item.times}}次</van-col>
        <van-col :span="4" class="textcenter">{{item.score}}</van-col>
        <van-col :span="5" class="textcenter">
          <button class="caobut status1" v-show="item.is_check==3" @click="tocheck(item.id)">考核</button>
          <button
            class="caobut status2"
            v-show="item.is_check==2"
            @click="toupdate(item.check_id)"
          >完善</button>
          <button class="caobut status3" v-show="item.is_check==1" disabled>完成</button>
        </van-col>
        <van-col :span="5" class="textright">
          <button class="caobut status4" @click="todetail(item.id,signdate)">详情</button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import CommonBar from "../../common/commonBar";
export default {
  components: {
    CommonBar
  },
  data() {
    return {
      nochekData: require("../../../../static/image/nochekData.png"),
      options: {
        type: "icon",
        centerText: "保洁员考核",
        iconNname: "wap-home",
        lefttype: "left"
      },
      signdate: "",
      showPickerdate: false,
      currentDate: new Date(),
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(),
      List: [],
      clearnameList: [{ text: "请选择", value: 0 }],
      clearname: 0,
      //选择姓名
      xzshow: false,
      searchx: "", //搜索行政村
      xzname: "请选择姓名",
      xzList: [],
      tabCurrentIndex: 0,
      nodat: false
    };
  },
  computed: {
    ...mapState({
      token: state => state.Authorization,
      user_department_type: state => state.userData.department_type, //人员类型
      user_department_id: state => state.userData.department_id // 人员id
    }),
    NewItems() {
      var _this = this;
      var NewItems = [];
      this.xzList.map(function(item) {
        _this.nodat = false;
        if (item.text.search(_this.searchx) != -1) {
          NewItems.push(item);
        } else {
          _this.nodat = true;
        }
      });
      return NewItems;
    }
  },
  created() {},
  mounted() {
    this.showDate();
    this.getLoadData();
    var that = this;
    document.addEventListener("backbutton", that.backbutton, false);
  },
  destroyed() {
    var that = this;
    document.removeEventListener("backbutton", that.backbutton, false);
  },
  methods: {
    backbutton() {
      console.log("返回");
      this.$router.push({ path: "/checkIndex" });
    },
    //考核列表
    getLoadData() {
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      var params = {
        token: this.token,
        district_id: this.user_department_id,
        check_date: this.signdate,
        cleaner_id: this.clearname
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Manager.GetAllCleanerCheckByDistrict&api=86`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.List = res.data;

            console.log("保洁员考核记录", this.List);
            var arr = [];
            res.data.forEach(function(item) {
              arr.push({
                text: item.cleaner_name,
                value: item.user_id
              });
            });
            // arr.unshift({ text: "请选择", value: 0 });
            this.xzList = arr;
            this.clearnameList = arr;
            console.log("保洁员姓名", this.clearnameList);
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //去历史
    todetail(id, signdate) {
      this.$router.push({
        //核心语句
        path: "/checkList", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id,
          signdate
        }
      });
    },
    //去考核
    tocheck(id) {
      this.$router.push({
        //核心语句
        path: "/cleanerCheck", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id
        }
      });
    },
    //去完善
    toupdate(check_id) {
      this.$router.push({
        //核心语句
        path: "/cleanerCheckUpdate", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          check_id
        }
      });
    },
    //当前时间
    showDate() {
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.signdate = year + "-" + month;
    },
    //日期选中
    onConfirmdate(val) {
      var d = new Date(val);
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      var datetime = year + "-" + month;
      this.signdate = datetime;
      this.getLoadData();
      this.showPickerdate = false;
    },
    //日期格式化
    formatterDate(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    //选择保洁员姓名
    onConfirmclearnameList() {
      if (this.clearname != 0) {
        this.List = [];

        this.$toast.loading({
          mask: true,
          message: "加载中...",
          duration: 5000
        });
        var params = {
          token: this.token,
          district_id: this.user_department_id,
          check_date: this.signdate,
          cleaner_id: this.clearname
        };
        this.$http
          .get(
            `${this.$basePath}?service=App.Manager.GetAllCleanerCheckByDistrict&api=86`,
            {
              params: params
            }
          )
          .then(res => {
            if (res.ret == 200) {
              this.$toast.clear();
              this.List = res.data;
            } else {
              this.$toast({ message: res.msg });
            }
          });
      } else {
        this.getLoadData();
      }
    },
    chosexz(id, index) {
      //匹配名字
      this.tabCurrentIndex = index;
      var obj = this.xzList.find(function(obj) {
        return obj.value == id;
      });
      this.xzname = obj.text;
      this.List = [];
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      var params = {
        token: this.token,
        district_id: this.user_department_id,
        check_date: this.signdate,
        cleaner_id: id
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Manager.GetAllCleanerCheckByDistrict&api=86`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.List = res.data;
          } else {
            this.$toast({ message: res.msg });
          }
        });
      this.xzshow = false;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/check";
.shuaixuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chosexz {
  width: 74%;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 0 10px 0 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popdiv {
  width: 100%;
}
.popitle {
  width: 100%;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  box-sizing: border-box;
  .searchxp {
    border: 1px solid #eee;
    border-radius: 40px;
    width: 80%;
    margin: 0 auto;
    padding: 6px;
    box-sizing: border-box;
  }
  .searchx {
    border: none;
    width: 100%;
    height: 20px;
    text-align: center;
  }
}
.pop_ul {
  width: 100%;
  height: calc(100% - 67px);
  overflow: scroll;
  .pop_li {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #eee;
    line-height: 44px;
    padding: 0 16px;
    box-sizing: border-box;
  }
}
.current {
  color: #0ad691;
}
</style>